﻿<%@ Control Language="C#" %>
<%@ Import Namespace="Hidistro.Core" %>
<%@ Import Namespace="Hidistro.UI.SaleSystem.Tags" %>
<%@ Register TagPrefix="wnxd" Namespace="wnxd.Web" Assembly="wnxd.Web" %>
<%@ Register TagPrefix="Hi" Namespace="Hidistro.UI.Common.Controls" Assembly="Hidistro.UI.Common.Controls" %>
<%@ Register TagPrefix="Hi" Namespace="Hidistro.UI.SaleSystem.Tags" Assembly="Hidistro.UI.SaleSystem.Tags" %>
<wnxd:Web runat="server"></wnxd:Web>
<%wnxd_SpreadPageOrder_Phone @this = (wnxd_SpreadPageOrder_Phone)this.Parent;%>
<form runat="server" action="/SpreadPageOrder_Phone.aspx" style="border: 1px solid #eb013f; float: left;">
    <div class="xzgz" id="dingdan">
        <h4><i>*</i>  选择产品</h4>
        <ul id="pid_list" runat="server"></ul>
        <input type="hidden" name="pid" value="0" />
    </div>
    <div class="xzgz">
        <h4><i>*</i>  选择规格</h4>
        <asp:Literal runat="server" ID="sku_list"></asp:Literal>
    </div>

    <div class="xzgz">
        <h4><i>*</i>  付款方式</h4>
        <div class="thn" style="white-space: nowrap; line-height: 20px; margin-top: 5px; float: left; margin-left: 1em;">
            <input class="dxk" type="radio" name="fkfs" value="1" checked="checked">
            <label>
                货到付款
            </label>
        </div>
        <div class="thn" style="white-space: nowrap; line-height: 20px; margin-top: 5px; float: left; margin-left: 1em;">
            <input class="dxk" type="radio" name="fkfs" value="3">
            <label>
                支付宝在线付款
            </label>
        </div>
        <p class="zerg">(在线支付立减百分之八）</p>
    </div>
    <div class="qianxie">
        <ul>
            <li>
                <span class="bdl"><em>*</em>产品价格</span>
                <span class="bdr" id="price"><%=((wnxd_SpreadPageOrder_Phone)this.Parent)._prices[0]%> 元</span>
            </li>
            <li>
                <span class="bdl"><em>*</em>姓名</span>
                <span class="bdr">
                    <input class="txt kda" type="text" name="shr"></span>
            </li>
            <li>
                <span class="bdl"><em>*</em>手机号码</span>
                <span class="bdr">
                    <input class="txt kda" type="text" name="sjhm"></span>
            </li>

            <li>
                <span class="bdl"><em>*</em>所在地区</span>
                <span class="bdr">
                    <Hi:RegionSelectorphone runat="server" ID="dropRegions" />
                </span>
            </li>
            <li>
                <span class="bdl"><em>*</em>详细地址</span>
                <span class="bdr">
                    <textarea style="height: 65px" name="shdz" class="guest kdb"></textarea></span>
            </li>
            <li class="tergb">您在网上订单中留下的个人资料将会得到保密，绝无泄露！</li>
            <li class="tiagba"><a prefix="wnxd_Ajax" inc="aspnetForm" onclick="Submit" callback="CallBack" repeat="Repeat">提交订单</a></li>
        </ul>
    </div>
</form>
<div class="sdrg" style="margin-bottom: 0">
    <h4>发货通知Notice of shipment</h4>
    <style>
        .wnxd_gd {
            position: relative;
        }
    </style>
    <div class="sdrg-1">
        <div style="height: 100px; overflow: hidden;">
            <Hi:wnxd_SpreadPage_Info runat="server" />
        </div>
        <p>
            <em>温馨提示：</em>
            货物送到先开箱验货，确认商品无误后再付款！收到货有任何疑问请拨打
我们免费客服电话。
        </p>
    </div>
</div>
<script type="text/javascript">
    function aa(obj) {
        location.href = "#dingdan";
        var aname = $(obj).attr("aname");
        $("#<%=@this.ul_pid_list.ClientID%> li").each(function () {
            if ($.trim($(this).text()) == aname) {
                $(".xuanz").removeClass("xuanz");
                $(this).addClass("xuanz");
            }
        });
    }
</script>
<script type="text/javascript">
    function Repeat() {
        alert("请不要重复提交");
    }
    (function () {
        var $pid = $("[name='pid']"),
            $sku = $("#<%=@this.ul_pid_list.ClientID%>").children("li"),
            $plist = $("[name='sku']"),
            $f = $("input[name='fkfs']"),
            $price = $("#price");
        $sku.click(function () {
            var $this = $(this);
            $sku.filter(".xuanz").removeClass("xuanz");
            $this.addClass("xuanz");
            $pid.val($sku.index($this));
        });
        $plist.click(function () {
            var $this = $f.filter(":checked");
            if ($this.length == 1) {
                var $val = $this.val();
                if ($val != "1") {
                    $val = $(this).attr("price");
                    var num = parseInt($val),
                        sub = num * 0.08;
                    $val += " - " + sub.toFixed(2) + " = <span style='color:red;'>" + (num - sub).toFixed(2) + "</span>";
                }
                else {
                    $val = $(this).attr("price");
                }
                $price.html($val + " 元");
            }
        });
        $f.click(function () {
            var $this = $plist.filter(":checked");
            if ($this.length == 1) {
                var $val = $(this).val();
                if ($val != "1") {
                    $val = $this.attr("price");
                    var num = parseInt($val),
                       sub = num * 0.08;
                    $val += " - " + sub.toFixed(2) + " = <span style='color:red;'>" + (num - sub).toFixed(2) + "</span>";
                }
                else {
                    $val = $this.attr("price");
                }
                $price.html($val + " 元");
            }
        });
        $(".wnxd_gd").each(function (index) {
            var $this = $(this),
                $count = $(".wnxd_gd").length,
                ms = $this.children("li").length * 588,
                $height = $this.height(),
                $fun = function (n, index) {
                    $this.animate({ "top": -(index + 1) * $height }, ms * n, "linear", function () {
                        $this.css("top", ($count - index - 1) * $height);
                        $fun($count, index);
                    });
                };
            if (ms != 0) $fun(index + 1, index);
        });
        var iscb = false,
            $submit = $("[callback='CallBack']");
        window.CallBack = function (e) {
            if (iscb && e != "") {
                try {
                    e = JSON.parse(e);
                    iscb = false;
                    $submit.html("提交订单");
                    if (e.error == 0) {
                        location.href = e.url;
                    }
                    else {
                        alert(e.msg);
                    }
                }
                catch (ex) {
                    iscb = true;
                }
            }
        };
        $submit.click(function () {
            if (iscb) return false;
            iscb = true;
            var $this = $(this),
                h = $this.height() * 0.6;
            $this.html('<img src="http://image.juseshop.com/images/newindex/loading.gif" style="width: ' + h + 'px; height: ' + h + 'px; display: inline-block;margin-right: 10px;" />提交中...');
            setTimeout(function () {
                if (iscb) {
                    iscb = false;
                    alert("您的订单已提交,但由于网络不稳定,请联系客服");
                }
            }, 30000);
        });
    })();
</script>
<style type="text/css">
    .xzgz {
        float: left;
        width: 100%;
    }

        .xzgz h4 {
            font-size: 1.5em;
            color: #000;
            border-bottom: 1px dashed #e8003e;
            line-height: 2em;
        }

        .xzgz i {
            color: #e8003e;
        }

        .xzgz ul {
            margin: 2% 0;
            float: left;
            width: 100%;
        }

            .xzgz ul li {
                width: 23%;
                float: left;
                text-align: center;
                background: #e5e5e5;
                padding: 2% 0;
                margin-top: 1%;
                margin-left: 1%;
            }

                .xzgz ul li.xuanz {
                    background: #e8003e;
                }

                    .xzgz ul li.xuanz a {
                        color: #fff;
                    }

                .xzgz ul li a {
                    font-size: 1.3em;
                }

        .xzgz p.zerg {
            float: left;
            font-size: 1.5em;
            color: #e8003e;
            width: 100%;
            border-bottom: 1px solid #000;
            padding-bottom: 2%;
        }

    .thn {
        font-size: 1.3em;
    }

    .qianxie {
        float: left;
        width: 100%;
    }

        .qianxie em {
            color: #f00;
        }

        .qianxie ul li {
            padding: 1em 0;
            float: left;
            width: 100%;
        }

    .bdl {
        float: left;
        width: 5em;
        margin-right: 0.5em;
        font-size: 1.5em;
    }

    .bdr {
        width: 15em;
        float: left;
        font-size: 1.5em;
        border-left: 1px solid #c8c8c8;
        padding-left: 0.5em;
    }

    .qianxie input {
        border: 1px solid #c8c8c8;
        line-height: 1.5em;
        width: 100%;
        font-size: 1.0em;
    }

    .waa select {
        font-size: 1.0em;
        width: 11.8em;
        margin-bottom: 1em;
    }

    .guest {
        width: 100%;
        font-size: 1.1em;
    }

    .tergb {
        text-align: center;
        font-size: 1.2em;
        color: #e8003e;
    }

    .tiagba {
        text-align: center;
    }

        .tiagba a {
            display: inline-block;
            width: 50%;
            height: 2em;
            color: #fff;
            line-height: 2em;
            font-size: 2.5em;
            border-radius: 5px;
            background: #e8003e;
        }

    .bdr select {
        font-size: 1.0em;
        width: 12em;
        margin-bottom: 1em;
    }

    .sdrg {
        float: left;
        width: 100%;
        margin-bottom: 10em;
        margin-top: 1em;
    }

        .sdrg h4 {
            text-align: center;
            background: #e8003e none repeat scroll 0 0;
            color: #fff;
            font-size: 1.8em;
            line-height: 2em;
            padding-left: 2%;
        }

    .sdrg-1 {
        border: 1px solid #e8003e;
        padding: 2%;
    }

        .sdrg-1 ul li a p {
            font-size: 1.5em;
            line-height: 1.5em;
            color: #000;
            margin: 0;
        }

        .sdrg-1 p {
            font-size: 1.5em;
            line-height: 1.3em;
            color: #e8003e;
            margin-top: 1em;
        }

            .sdrg-1 p em {
                float: left;
                width: 100%;
                font-size: 1.5em;
            }

    .bdr span {
        margin-right: 0;
    }
</style>
